JavaScript AbortController įvaldymas: sklandus užklausų atšaukimas

Dinamiškame modernaus žiniatinklio kūrimo pasaulyje asinchroninės operacijos yra interaktyvios ir patrauklios vartotojo patirties pagrindas. Nuo duomenų gavimo iš API iki vartotojo sąveikų tvarkymo, JavaScript dažnai susiduria su užduotimis, kurių įvykdymas gali užtrukti. Tačiau kas nutinka, kai vartotojas išeina iš puslapio dar nebaigus vykdyti užklausos, arba kai vėlesnė užklausa pakeičia ankstesnę? Be tinkamo valdymo, šios vykdomos operacijos gali lemti iššvaistytus išteklius, pasenusius duomenis ir net netikėtas klaidas. Būtent čia atsiskleidžia JavaScript AbortController API, siūlanti patikimą ir standartizuotą mechanizmą asinchroninėms operacijoms atšaukti.

Užklausų atšaukimo poreikis

Apsvarstykite tipinį scenarijų: vartotojas rašo tekstą paieškos laukelyje, ir su kiekvienu klavišo paspaudimu jūsų programa siunčia API užklausą, kad gautų paieškos pasiūlymus. Jei vartotojas rašo greitai, vienu metu gali būti vykdomos kelios užklausos. Jei vartotojas pereina į kitą puslapį, kol šios užklausos dar laukiamos, atsakymai, jei jie atkeliaus, bus nebesvarbūs, o jų apdorojimas bus vertingų kliento pusės išteklių švaistymas. Be to, serveris jau galėjo apdoroti šias užklausas, patirdamas nereikalingas skaičiavimo išlaidas.

Kita dažna situacija yra, kai vartotojas inicijuoja veiksmą, pavyzdžiui, failo įkėlimą, bet vėliau nusprendžia jį atšaukti. Arba galbūt ilgai trunkanti operacija, pavyzdžiui, didelio duomenų rinkinio gavimas, nebėra reikalinga, nes buvo pateikta nauja, aktualesnė užklausa. Visais šiais atvejais gebėjimas sklandžiai nutraukti šias vykdomas operacijas yra labai svarbus siekiant:

• Gerinti vartotojo patirtį: Neleidžia rodyti pasenusių ar neaktualių duomenų, išvengia nereikalingų vartotojo sąsajos atnaujinimų ir palaiko programos spartą.
• Optimizuoti išteklių naudojimą: Taupo pralaidumą nesiunčiant nereikalingų duomenų, sumažina procesoriaus ciklų skaičių neapdorojant užbaigtų, bet nebereikalingų operacijų, ir atlaisvina atmintį.
• Užkirsti kelią „lenktynių sąlygoms“ (race conditions): Užtikrina, kad apdorojami tik naujausi aktualūs duomenys, išvengiant scenarijų, kai senesnės, pakeistos užklausos atsakymas perrašo naujesnius duomenis.

„AbortController“ API pristatymas

AbortController sąsaja suteikia būdą signalizuoti atšaukimo užklausą vienai ar daugiau JavaScript asinchroninių operacijų. Ji sukurta veikti su API, kurios palaiko AbortSignal, ypač su modernia fetch API.

Iš esmės AbortController turi du pagrindinius komponentus:

• AbortController egzempliorius: Tai objektas, kurį sukuriate norėdami sukurti naują atšaukimo mechanizmą.
• signal savybė: Kiekvienas AbortController egzempliorius turi signal savybę, kuri yra AbortSignal objektas. Būtent šį AbortSignal objektą perduodate asinchroninei operacijai, kurią norite turėti galimybę atšaukti.

AbortController taip pat turi vieną metodą:

• abort(): Iškvietus šį metodą AbortController egzemplioriuje, nedelsiant suaktyvinamas susijęs AbortSignal, pažymint jį kaip atšauktą. Bet kuri operacija, klausanti šio signalo, bus informuota ir galės atitinkamai reaguoti.

Kaip „AbortController“ veikia su „fetch“

fetch API yra pagrindinis ir dažniausias AbortController naudojimo atvejis. Teikiant fetch užklausą, galite perduoti AbortSignal objektą options objekte. Jei signalas yra atšaukiamas, fetch operacija bus nutraukta anksčiau laiko.

Pagrindinis pavyzdys: vienos „fetch“ užklausos atšaukimas

Pavaizduokime tai paprastu pavyzdžiu. Įsivaizduokime, kad norime gauti duomenis iš API, bet norime turėti galimybę atšaukti šią užklausą, jei vartotojas nuspręstų išeiti iš puslapio prieš jai pasibaigiant.

```javascript // Sukuriame naują AbortController egzempliorių const controller = new AbortController(); const signal = controller.signal; // API galinio taško URL const apiUrl = 'https://api.example.com/data'; console.log('Inicijuojama fetch užklausa...'); fetch(apiUrl, { signal: signal // Perduodame signalą į fetch parinktis }) .then(response => { if (!response.ok) { throw new Error(`HTTP klaida! būsena: ${response.status}`); } return response.json(); }) .then(data => { console.log('Duomenys gauti:', data); // Apdorojame gautus duomenis }) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch užklausa buvo atšaukta.'); } else { console.error('Fetch klaida:', error); } }); // Imituojame užklausos atšaukimą po 5 sekundžių setTimeout(() => { console.log('Atšaukiama fetch užklausa...'); controller.abort(); // Tai suaktyvins .catch bloką su AbortError }, 5000); ```

Šiame pavyzdyje:

• Mes sukuriame AbortController ir išgauname jo signal.
• Mes perduodame šį signal į fetch parinktis.
• Jei controller.abort() yra iškviečiamas prieš fetch užklausai pasibaigiant, fetch grąžinamas pažadas (promise) bus atmestas su AbortError.
• .catch() blokas specialiai tikrina šį AbortError, kad atskirtų tikrą tinklo klaidą nuo atšaukimo.

Praktinė įžvalga: Naudodami AbortController su fetch, savo catch blokuose visada patikrinkite, ar error.name === 'AbortError', kad galėtumėte sklandžiai apdoroti atšaukimus.

Kelių užklausų tvarkymas su vienu valdikliu

Vienas AbortController gali būti naudojamas atšaukti kelias operacijas, kurios visos klauso jo signal. Tai nepaprastai naudinga scenarijuose, kai vartotojo veiksmas gali panaikinti kelias vykdomas užklausas. Pavyzdžiui, jei vartotojas išeina iš informacinės panelės puslapio, galbūt norėsite atšaukti visas laukiančias duomenų gavimo užklausas, susijusias su ta panele.

```javascript const controller = new AbortController(); const signal = controller.signal; const apiUrl1 = 'https://api.example.com/users'; const apiUrl2 = 'https://api.example.com/products'; function fetchData(url, name) { console.log(`Inicijuojama ${name} fetch užklausa...`); return fetch(url, { signal: signal }) .then(response => { if (!response.ok) { throw new Error(`HTTP klaida! būsena: ${response.status}`); } return response.json(); }) .then(data => { console.log(`${name} duomenys gauti:`, data); }) .catch(error => { if (error.name === 'AbortError') { console.log(`${name} fetch užklausa buvo atšaukta.`); } else { console.error(`${name} fetch klaida:`, error); } }); } // Inicijuojame kelias fetch užklausas fetchData(apiUrl1, 'Users'); fetchData(apiUrl2, 'Products'); // Imituojame visų užklausų atšaukimą po 7 sekundžių setTimeout(() => { console.log('Atšaukiamos visos fetch užklausos...'); controller.abort(); }, 7000); ```

Čia tiek 'Users', tiek 'Products' duomenų gavimo operacijos naudoja tą patį signal. Kai iškviečiamas controller.abort(), abi užklausos bus nutrauktos.

Globali perspektyva: Šis modelis yra neįkainojamas sudėtingoms programoms su daugybe komponentų, kurie gali savarankiškai inicijuoti API iškvietimus. Pavyzdžiui, tarptautinėje el. prekybos platformoje gali būti komponentų produktų sąrašams, vartotojų profiliams ir pirkinių krepšelio suvestinėms, kurie visi gauna duomenis. Jei vartotojas greitai pereina iš vienos produktų kategorijos į kitą, vienas abort() iškvietimas gali išvalyti visas laukiančias užklausas, susijusias su ankstesniu rodiniu.

AbortSignal įvykių klausytojas (Event Listener)

Nors fetch automatiškai apdoroja atšaukimo signalą, kitoms asinchroninėms operacijoms gali prireikti aiškaus registravimo atšaukimo įvykiams. AbortSignal objektas suteikia addEventListener metodą, kuris leidžia klausytis 'abort' įvykio. Tai ypač naudinga integruojant AbortController su pasirinktine asinchronine logika ar bibliotekomis, kurios tiesiogiai nepalaiko signal parinkties savo konfigūracijoje.

```javascript const controller = new AbortController(); const signal = controller.signal; function performLongTask(signal) { return new Promise((resolve, reject) => { const taskDuration = 10000; // Užduotis trunka 10 sekundžių let elapsedTime = 0; const intervalId = setInterval(() => { elapsedTime += 1000; console.log(`Užduoties eiga: ${elapsedTime / 1000}s`); if (elapsedTime >= taskDuration) { clearInterval(intervalId); resolve('Užduotis sėkmingai baigta!'); } }, 1000); // Klausomės atšaukimo įvykio signal.addEventListener('abort', () => { clearInterval(intervalId); console.log('Ilga užduotis atšaukta per įvykių klausytoją.'); reject(new DOMException('Atšaukta', 'AbortError')); }); }); } console.log('Pradedama ilga užduotis...'); performLongTask(signal) .then(result => console.log(result)) .catch(error => { if (error.name === 'AbortError') { console.log('Operacija buvo atšaukta.'); } else { console.error('Įvyko netikėta klaida:', error); } }); // Atšaukiame užduotį po 3 sekundžių setTimeout(() => { console.log('Inicijuojamas atšaukimas...'); controller.abort(); }, 3000); ```

Šiame pavyzdyje:

• performLongTask funkcija priima AbortSignal.
• Ji nustato intervalą, imituojantį progresą.
• Svarbiausia, ji prideda įvykių klausytoją prie signal, skirtą 'abort' įvykiui. Kai įvykis suveikia, ji išvalo intervalą ir atmeta pažadą su AbortError.

Praktinė įžvalga: addEventListener('abort', callback) modelis yra gyvybiškai svarbus pasirinktinei asinchroninei logikai, užtikrinant, kad jūsų kodas gali reaguoti į atšaukimo signalus iš išorės.

Savybė signal.aborted

AbortSignal taip pat turi loginę savybę aborted, kuri grąžina true, jei signalas buvo atšauktas, ir false kitu atveju. Nors ji nėra tiesiogiai naudojama atšaukimui inicijuoti, ji gali būti naudinga tikrinant dabartinę signalo būseną jūsų asinchroninėje logikoje.

```javascript const controller = new AbortController(); const signal = controller.signal; function checkStatus(signal) { if (signal.aborted) { console.log('Negalima patikrinti būsenos, signalas jau atšauktas.'); return; } console.log('Tikrinama būsena...'); // Imituojame tam tikrą darbą... setTimeout(() => { if (!signal.aborted) { console.log('Būsenos patikrinimas baigtas.'); } else { console.log('Būsenos patikrinimas nutrauktas dėl atšaukimo.'); } }, 2000); } checkStatus(signal); // Atšaukiame po 1 sekundės setTimeout(() => { console.log('Atšaukiama...'); controller.abort(); }, 1000); ```

Šiame fragmente signal.aborted leidžia patikrinti būseną prieš pradedant potencialiai daug išteklių reikalaujančias operacijas. Nors fetch API tai tvarko viduje, pasirinktinei logikai tokie patikrinimai gali būti naudingi.

Ne tik „fetch“: kiti panaudojimo atvejai

Nors fetch yra ryškiausias AbortController naudotojas, jo potencialas apima bet kokią asinchroninę operaciją, kurią galima suprojektuoti klausytis AbortSignal. Tai apima:

• Ilgai trunkančius skaičiavimus: Web Workers, sudėtingas DOM manipuliacijas ar intensyvų duomenų apdorojimą.
• Laikmačius: Nors setTimeout ir setInterval tiesiogiai nepriima AbortSignal, galite juos apgaubti pažadais, kurie tai daro, kaip parodyta performLongTask pavyzdyje.
• Kitas bibliotekas: Daugelis modernių JavaScript bibliotekų, dirbančių su asinchroninėmis operacijomis (pvz., kai kurios duomenų gavimo bibliotekos, animacijos bibliotekos), pradeda integruoti AbortSignal palaikymą.

Pavyzdys: „AbortController“ naudojimas su „Web Workers“

„Web Workers“ puikiai tinka perkelti sunkias užduotis iš pagrindinės gijos. Galite bendrauti su „Web Worker“ ir pateikti jam AbortSignal, kad būtų galima atšaukti darbuotojuje atliekamą darbą.

main.js

```javascript // Sukuriame Web Worker const worker = new Worker('worker.js'); // Sukuriame AbortController worker užduočiai const controller = new AbortController(); const signal = controller.signal; console.log('Siunčiama užduotis į worker...'); // Siunčiame užduoties duomenis ir signalą į worker worker.postMessage({ task: 'processData', data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], signal: signal // Pastaba: Signalų negalima tiesiogiai perduoti tokiu būdu. // Turime siųsti pranešimą, kurį „worker“ galėtų panaudoti // savo signalui sukurti arba klausytis pranešimų. // Praktiškiau yra siųsti pranešimą atšaukimui. }); // Patikimesnis būdas valdyti signalą su worker'iais yra per pranešimų siuntimą: // Patikslinkime: siunčiame 'start' pranešimą ir 'abort' pranešimą. worker.postMessage({ command: 'startProcessing', payload: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }); worker.onmessage = function(event) { console.log('Pranešimas iš worker:', event.data); }; // Imituojame worker užduoties atšaukimą po 3 sekundžių setTimeout(() => { console.log('Atšaukiama worker užduotis...'); // Siunčiame 'abort' komandą į worker worker.postMessage({ command: 'abortProcessing' }); }, 3000); // Nepamirškite nutraukti worker, kai baigsite // worker.terminate(); ```

worker.js

```javascript let processingInterval = null; let isAborted = false; self.onmessage = function(event) { const { command, payload } = event.data; if (command === 'startProcessing') { isAborted = false; console.log('Worker gavo startProcessing komandą. Duomenys:', payload); let progress = 0; const total = payload.length; processingInterval = setInterval(() => { if (isAborted) { clearInterval(processingInterval); console.log('Worker: Apdorojimas atšauktas.'); self.postMessage({ status: 'aborted' }); return; } progress++; console.log(`Worker: Apdorojamas elementas ${progress}/${total}`); if (progress === total) { clearInterval(processingInterval); console.log('Worker: Apdorojimas baigtas.'); self.postMessage({ status: 'completed', result: 'Visi elementai apdoroti' }); } }, 500); } else if (command === 'abortProcessing') { console.log('Worker gavo abortProcessing komandą.'); isAborted = true; // Intervalas išsivalys pats per kitą ciklą dėl isAborted patikrinimo. } }; ```

Paaiškinimas:

• Pagrindinėje gijoje sukuriame AbortController.
• Užuot perdavę signal tiesiogiai (kas neįmanoma, nes tai sudėtingas objektas, kurio negalima lengvai perduoti), mes naudojame pranešimų siuntimą. Pagrindinė gija siunčia 'startProcessing' komandą, o vėliau - 'abortProcessing' komandą.
• „Worker“ klauso šių komandų. Gavęs 'startProcessing', jis pradeda savo darbą ir nustato intervalą. Jis taip pat naudoja vėliavėlę isAborted, kurią valdo 'abortProcessing' komanda.
• Kai isAborted tampa true, „worker“ intervalas išsivalo ir praneša, kad užduotis buvo atšaukta.

Praktinė įžvalga: Naudodami „Web Workers“, įdiekite pranešimais pagrįstą komunikacijos modelį, kad signalizuotumėte atšaukimą, efektyviai imituodami AbortSignal elgseną.

Geroji praktika ir svarstymai

Norėdami efektyviai naudoti AbortController, laikykitės šių gerosios praktikos principų:

• Aiškūs pavadinimai: Naudokite aprašomuosius kintamųjų pavadinimus savo valdikliams (pvz., dashboardFetchController, userProfileController), kad juos efektyviai valdytumėte.
• Apimties valdymas (Scope Management): Užtikrinkite, kad valdikliai būtų tinkamai apibrėžti. Jei komponentas išmontuojamas, atšaukite visas su juo susijusias laukiančias užklausas.
• Klaidų apdorojimas: Visada atskirkite AbortError nuo kitų tinklo ar apdorojimo klaidų.
• Valdiklio gyvavimo ciklas: Vienas valdiklis gali atšaukti operacijas tik vieną kartą. Jei laikui bėgant reikia atšaukti kelias, nepriklausomas operacijas, jums reikės kelių valdiklių. Tačiau vienas valdiklis gali vienu metu atšaukti kelias operacijas, jei jos visos dalijasi jo signalu.
• DOM „AbortSignal“: Atminkite, kad AbortSignal sąsaja yra DOM standartas. Nors plačiai palaikoma, prireikus užtikrinkite suderinamumą su senesnėmis aplinkomis (nors palaikymas moderniose naršyklėse ir Node.js yra puikus).
• Išvalymas (Cleanup): Jei naudojate AbortController komponentais pagrįstoje architektūroje (pvz., React, Vue, Angular), užtikrinkite, kad iškviestumėte controller.abort() išvalymo fazėje (pvz., componentWillUnmount, useEffect grąžinimo funkcija, ngOnDestroy), kad išvengtumėte atminties nutekėjimo ir netikėto elgesio, kai komponentas pašalinamas iš DOM.

Globali perspektyva: Kuriant programą pasaulinei auditorijai, atsižvelkite į tinklo greičio ir delsos skirtumus. Vartotojai regionuose su prastesniu ryšiu gali patirti ilgesnį užklausų laiką, todėl efektyvus atšaukimas tampa dar svarbesnis, siekiant išvengti didelio jų patirties pablogėjimo. Svarbu kurti savo programą atsižvelgiant į šiuos skirtumus.

Išvada

AbortController ir su juo susijęs AbortSignal yra galingi įrankiai asinchroninėms operacijoms JavaScript kalboje valdyti. Suteikdami standartizuotą būdą signalizuoti atšaukimą, jie leidžia kūrėjams kurti patikimesnes, efektyvesnes ir patogesnes vartotojui programas. Nesvarbu, ar dirbate su paprasta fetch užklausa, ar organizuojate sudėtingas darbo eigas, AbortController supratimas ir diegimas yra pagrindinis įgūdis kiekvienam moderniam žiniatinklio kūrėjui.

Užklausų atšaukimo įvaldymas su AbortController ne tik pagerina našumą ir išteklių valdymą, bet ir tiesiogiai prisideda prie geresnės vartotojo patirties. Kurdami interaktyvias programas, nepamirškite integruoti šios svarbios API, kad galėtumėte sklandžiai tvarkyti laukiančias operacijas, užtikrindami, kad jūsų programos išliktų greitos ir patikimos visiems vartotojams visame pasaulyje.